<template>
  <div class="commonhead">

    <div class="head">
      <!--手机端导航栏-->
      <!-- <el-popover
        placement="right"
        width="100%"
        trigger="click"
        class="menu-buttom">
        <el-menu
          :router="true"
          :default-active="activeIndex"
          class="el-menu-demo m-mobile-show"
          mode="vertical"
          :unique-opened="true"
          @select="handleSelect"
          background-color="#ffffff"
          text-color="black"
          active-text-color="#409EFF">
          没有子菜单的
          <el-menu-item v-for="item in noChildren" :key="item.key" :index="item.key">
            <span slot="title">{{ item.value }}</span>
          </el-menu-item>
          有子菜单的
          <el-submenu  v-for="(item) in hasChildren" :key="item.key" :index="item.key">
            <template slot="title">
              <span slot="title">{{ item.value }}  </span>
            </template>
            <el-menu-item-group v-for="(itm,index) in item.menus" :key="index">
              <el-menu-item :index="itm.key+'?'+(index+1)">{{ itm.value }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

        </el-menu>
        <el-button slot="reference" icon="el-icon-more" class="m-mobile-show"></el-button>
      </el-popover> -->

      <!-- <div class="text m-mobile-hide">
        <el-button type="text" size="mini" style="color: #d1d1d1" @click="jumpPage('/partners')"><span class="span">合作伙伴 |</span>  </el-button>
        <el-button type="text" size="mini" style="color: #d1d1d1" @click="jumpPage('/contactUs')"><span class="span">联系我们 |</span>  </el-button>
      </div> -->
      <!--电脑端导航栏-->
      <div class="text m-mobile-hide">
        <el-button class="text-button" type="text" size="mini" style="color: #d1d1d1" @click="jumpPage('/partners')"><span class="span">合作伙伴 |</span>  </el-button>
        <el-button class="text-button" type="text" size="mini" style="color: #d1d1d1" @click="jumpPage('/contactUs')"><span class="span">联系我们 |</span>  </el-button>
      </div>
      <div class="menu">
        <div class="menu-img">
          <img src="../assets/logo.png" class="img-logo"/>
        </div>
        <div class="menu-box">
          <div class="menu-menu">
            <el-menu
              :router="true"
              :default-active="activeIndex"
              class="el-menu-demo m-mobile-hide"
              mode="horizontal"
              @select="handleSelect"
              background-color="#ffffff"
              text-color="black"
              active-text-color="#409EFF">
              <!--没有子菜单的-->
              <el-menu-item v-for="item in noChildren" :key="item.key" :index="item.key">
                <span slot="title">{{ item.value }}</span>
              </el-menu-item>
              <!--有子菜单的-->
              <el-submenu v-for="item in hasChildren" :key="item.key" :index="item.key">
                <template slot="title">
                  <span slot="title" @click="jumpPage(item.key)">{{ item.value }}</span>
                </template>
                <el-row :gutter="24">
                  <el-col :span="11">
                    <div class="div-left">
                      <!--没有第三层菜单-->
                      <el-menu-item-group v-if="itm.menus==null" style="width: 130px;" v-for="(itm,index) in item.menus" :key="index">
                        <el-menu-item :index="(itm.key==null || itm.key=='' ? '' : item.key+'?'+(index+1) )">
                          {{ itm.value  }}
                        </el-menu-item>
                      </el-menu-item-group>
                      <!--有第三层菜单-->
                      <el-menu-item-group v-if="itm.menus!=null" style="width: 140px;" v-for="(itm,index) in item.menus" :key="index">
                        <div class="div-black">
                          <h3><span>{{ itm.value  }}</span></h3>
                          <el-menu-item v-for="(it,it_index) in itm.menus" :key="it_index" :index="(it.key==null || it.key=='' ? '' : it.key+'?'+(it.type)+'-'+(it_index+1) )">
                            {{ it.value  }}
                          </el-menu-item>
                        </div>
                      </el-menu-item-group>
                    </div>
                  </el-col>
                  <!--图片-->
                  <el-col :span="13">
                    <div class="div-right">
                      <img :src="item.image" class="menu-right-img" />
                    </div>
                  </el-col>
                </el-row>
              </el-submenu>
            </el-menu>
          </div>
        </div>
      </div>
      <!--手机端-->
      <div class="head-box">
        <div class="head-box1">
          <el-popover
            placement="right"
            trigger="click"
            class="menu-buttom">
            <el-menu
              :router="true"
              :default-active="activeIndex"
              class="m-mobile-show"
              mode="vertical"
              :unique-opened="true"
              @select="handleSelect"
              background-color="#ffffff"
              text-color="black"
              active-text-color="#409EFF">
              <!--没有子菜单的-->
              <el-menu-item v-for="item in noChildren" :key="item.key" :index="item.key">
                <span slot="title">{{ item.value }}</span>
              </el-menu-item>
              <!--有子菜单的-->
              <el-submenu  v-for="(item) in hasChildren" :key="item.key" :index="item.key">
                <template slot="title">
                  <span slot="title">{{ item.value }}  </span>
                </template>
                <!--没有第三层子菜单-->
                <el-menu-item-group v-if="itm.menus==null" v-for="(itm,index) in item.menus" :key="index">
                  <el-menu-item :index="itm.key+'?'+(index+1)">{{ itm.value }}</el-menu-item>
                </el-menu-item-group>
                <!--有第三层子菜单-->
                <el-menu-item-group v-if="itm.menus!=null" v-for="(itm,index) in item.menus" :key="index">
                  <el-menu-item v-for="(it,it_index) in itm.menus" :key="it_index" :index="it.key+'?'+(it.type)+'-'+(it_index+1)">{{ it.value }}</el-menu-item>
                </el-menu-item-group>

              </el-submenu>

            </el-menu>
            <el-button slot="reference" icon="el-icon-more" class="m-mobile-show"></el-button>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>
<!--导航栏-->
<script>
    export default {
        name: "CommonHeader",
        data() {
            return {
                activeIndex: '/home',
                menu_visible: false,
                menus:[
                    {
                        key:"/home",
                        value:"首页",
                        url:"/home",
                        menus:null
                    },{
                        key:"/productcenter",
                        value:"产品中心",
                        image:require('../assets/head_image/产品.png'),
                        menus:[
                            {
                                key:"",
                                value:"系统",
                                type:1,
                                menus:[
                                    {
                                        key:"/productcenter",
                                        value:"环形穿梭车系统",
                                        type:1,
                                    },{
                                        key:"/productcenter",
                                        value:"高速分拣系统",
                                        type:1,
                                    },{
                                        key:"/productcenter",
                                        value:"四向车系统",
                                        type:1,
                                    },{
                                        key:"/productcenter",
                                        value:"WMS",
                                        type:1,
                                    },
                                ]
                            },{
                                key:"",
                                value:"单机",
                                type:2,
                                menus:[
                                    {
                                        key:"/productcenter",
                                        value:"堆垛机",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"RGV",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"升降机",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"输送机",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"拆-叠盘机",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"机器人",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"旋转站台",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"字母车",
                                        type:2,
                                    },{
                                        key:"/productcenter",
                                        value:"AGV",
                                        type:2,
                                    }
                                ]
                            }
                        ]
                    },{
                        key:"/engineering",
                        value:"工程案例",
                        image:require('../assets/head_image/工程.png'),
                        menus:[
                            {
                                key:"/engineering",
                                value:"粮油行业",
                            },{
                                key:"/engineering",
                                value:"造纸行业",
                            },{
                                key:"/engineering",
                                value:"化工化纤行业",
                            },{
                                key:"/engineering",
                                value:"食品饮料行业",
                            },{
                                key:"/engineering",
                                value:"电子＆电器行业",
                            },{
                                key:"/engineering",
                                value:"医药行业",
                            },{
                                key:"/engineering",
                                value:"汽车＆机械制造行业",
                            },
                        ]
                    },{
                        key:"/newsCenter",
                        value:"新闻中心",
                        image:require('../assets/head_image/新闻.png'),
                        menus:[
                            {
                                key:"/newsCenter",
                                value:"公司新闻",
                            },{
                                key:"/newsCenter",
                                value:"行业新闻",
                            }
                        ]
                    },{
                        key:"/aboutUs",
                        value:"关于我们",
                        image:require('../assets/head_image/关于.png'),
                        menus:[
                            {
                                key:"/aboutUs",
                                value:"公司简介",
                            },{
                                key:"/aboutUs",
                                value:"发展历程",
                            },{
                                key:"/aboutUs",
                                value:"业务研发",
                            },{
                                key:"/aboutUs",
                                value:"企业文化",
                            }
                        ]
                    }
                ]
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                //this.$router.push(key);
            },
            //跳转到url
            jumpPage(url){
                this.activeIndex=url+'?1';
                this.$router.push(url);
            },
            //设置默认的头
            setActiveIndex(){
                var url=window.location.href;
                var strs=url.split("/");
                this.activeIndex='/'+strs[strs.length-1]+'?1';
                // console.log(this.activeIndex)
            }
        },
        mounted(){
          this.setActiveIndex();
        },
        computed:{
            //没有子菜单
            noChildren(){
                //menuData.filter:遍历menuData中的数据，item为menuData中的一个对象，=>后面跟着判断条件
                console.log(this.menuData)
                return this.menuData.filter(item => !item.menus || item.menus.length==0);
            },
            //有子菜单
            hasChildren(){
                return this.menuData.filter(item => item.menus && item.menus.length>0);
            },
            //获取菜单列表
            menuData(){
                return this.menus;
            }
        }
    }
</script>

<style scoped>

  @media screen and (max-width: 855px){
    .m-mobile-hide{
      display: none !important;
    }
    .commonhead{
      width: 80%;
      height: 100%;
      margin: 0 auto;
      /* border: 1px solid red; */
    }
    .head{
      width: 100%;
      height: 100%;
      display: flex;
      /* flex: 0.5; */
      /* border: 1px solid green; */
    }
    .menu{
      /* flex: 0; */
      width: 80px;
      height: 100%;
      /* 宽高不影响 */
      /* border: 1px solid blue; */
    }
    .img-logo{
      width: 100%;
      height: 100%;
      /* display: block; */
      /* background-color: red; */
      /* display: inline-block; */
    }
    .head-box{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
    }
    .head-box1{
      /* width: 100%; */
      height: 100%;
    }
    .menu-buttom{
      /* flex: 1; */
      /* width: 100%; */
      height: 100%;
    }
    .m-mobile-show{
      width: 100%;
      height: 50px;

    }
  }
  @media (min-width: 855px) and (max-width: 1345px){
    .m-mobile-show{
      display: none !important;
    }
    .commonhead{
      width: 80%;
      height: 100%;
      /* border: 1px solid red; */
      margin: 0 auto;
    }
    .head{
      width: 100%;
      height:100%;
      /* border: 1px solid rgb(255, 191, 0); */
    }
    .text{
      width: 100%;
      height: 20%;
      margin: 0 auto;
      /* border: 1px solid rgb(0, 255, 30); */
      display: flex;/*设为弹性容器*/
      /* flex: 1; */
      justify-content: flex-end;/*弹性容器会靠右排列*/
    }

    .menu{
      width: 100%;
      height: 100%;
      display: flex;
      /* border: 1px solid rgb(0, 255, 255); */
    }
    .menu-img{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      /* border: 1px solid rgb(0, 81, 255); */
    }
    .img-logo{
      width: 100%;
      height: 100%;
      /* borde; */
      /* background-color: red; */
      display: block;
    }
    .menu-box{
      /* width: 90%; */
      flex: 1;
      /* width: 50px; */

    }
    .menu-menu{
      display: flex;
      justify-content: flex-end;
    }
    /deep/ .el-menu-item-group{
      display: inline-block;
      width: 100px;
    }
  }
  @media screen and (min-width: 1345px){
    /deep/ .el-menu-item-group{
      display: inline-block;
      width: 100px;
    }
    /* 手机端隐藏电脑端的 */
    .m-mobile-show{
      display: none !important;
    }
    .head{
      width: 100%;
      height:100%;
      /* border: 1px solid red; */
    }
    .menu{
      width:20%;
      height: 100%;
      display: flex;/*设为弹性容器*/
      /* justify-content: flex-end;弹性容器会靠右排列 */
      justify-content: space-between;
      /* border: 2px solid rgb(255, 0, 217); */
      /* background-color: rgb(255, 0, 21); */
    }
    .menu-img{
      width: 15%;
      height: 90%;
      /* display: flex; */
      /* border: 1px solid red; */
      /* background-color: rgb(78, 51, 197); */
    }
    .img-logo{
      /* display: flex; */
      display: block;
      /* width: 10px;
      height: 10px; */
      width: 80%;
      height: 90%;
    }
    .menu-menu{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 51%;
      height: 100%;
      /* border: 1px solid blue; */
    }
  }
  .commonhead{
    width: 80%;
    height: 100%;
    margin: 0 auto;
  }
  .head{
    width: 100%;
    height:100%;
    /* border: 1px solid red; */
  }
  .head-box{
    width: 100%;
    height: 100%;
    display: flex;
    /* line-height: 12px; */
    /* background-color: yellowgreen; */
  }
  .text{
    width: 100%;
    /* height: 100%; */
    margin: 0 auto;
    /* border: 1px solid rgb(0, 255, 30); */
    display: flex;/*设为弹性容器*/
    justify-content: flex-end;/*弹性容器会靠右排列*/
  }

  .menu{
    width:100%;
    height: 100%;
    display: flex;/*设为弹性容器*/
    /* justify-content: flex-end;弹性容器会靠右排列 */
    /* justify-content: space-between; */
    /* border: 2px solid rgb(255, 0, 217); */
    /* background-color: rgb(255, 0, 21); */
  }
  .menu-img{
    width: 120px;
    height: 100%;
    display: flex;
    justify-content: center;
    /* border: 1px solid red; */
    /* background-color: rgb(78, 51, 197); */
  }
  .img-logo{
    /* display: flex; */
    display: block;
    /* width: 10px;
    height: 10px; */
    width:100%;
    height: 100%;
  }
  .menu-box{
    width: 51%;
    height: 100%;
  }
  .menu-menu{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    /* border: 1px solid blue; */
  }
  .text-button:hover .span{
    color: rgb(64, 148, 255);
  }
  .div-left{/*让他最小300之后自适应*/
    width: 300px;
    vertical-align: top;
    /*min-width: 300px;*/
    display: inline-block;
    /*justify-content: flex-end;!*弹性容器会靠右排列*!*/
  }
  .div-black{
    display: inline-block;
    vertical-align: top;
  }
  .div-right{
    padding: 10px;
  }
  .menu-right-img{
    width: 250px;
    max-width: 100%;
    height: auto;
    position: relative;
  }
  span:hover{
    color: #409eff;
  }
</style>
